<!DOCTYPE html>
<html>
	<head>
		<!-- 引入vue -->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#app {
				text-align: center;
				margin-top: 10%;
				font-weight: 600;
				font-size: 1.5em;
				color: white;
				background-color: #033592;
				padding: 5%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>显示格式化时间</h1>
			当前日期时间：{{time|obb}}
			<p>格式化前：{{time}}</p>
			<p>格式化后：{{time | dateFormat}}</p>
			<p>只显示年月日：{{time | dateFormat('YYYY-MM-DD')}}</p>
			<p>只显示时分秒：{{time | dateFormat('HH:mm:ss')}}</p>
		</div>
		<script type="text/javascript">
			//调用vue中的过滤器，固定第一个参数为传入的要处理的数据data
			//Vue.filter('过滤器的名称',function(data){});
			//进行时间的格式化
			Vue.filter('dateFormat', function(dateStr, time) {
				//得到特定的时间
				var date = new Date(dateStr);
				var year = date.getFullYear();
				//ES6语法填充：var month = (date.getMonth()+1).toString().padStart(2, '0');
				var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
				var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

				//return `${year}-${month}-${day}`;

				if (time && time.toLowerCase() === 'yyyy-mm-dd') {
					return `${year}-${month}-${day}`;
				} else if (time && time.toLowerCase() === 'hh:mm:ss') {
					return `${hh}:${mm}:${ss}`;
				} else {
					return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
				}
			});
			var vm = new Vue({
				el: '#app',
				data: {
					time: new Date()
				},
				methods: {

				},
				filters: {
					// //设置一个函数来进行过滤
					obb: function(time) {
						//创建一个时间日期对象
						let date = new Date(time);
						var year = date.getFullYear(); //存储年
						var month = date.getMonth() + 1; //存储月份
						var day = date.getDate(); //存储日期
						var hours = date.getHours(); //存储时
						var minutes = date.getMinutes(); //存储分
						var seconds = date.getSeconds(); //存储秒
						//返回格式化后的日期
						return year + '年' + month + '月' + day + '日' + hours + '时' + minutes + '分' + seconds + '秒';
					}
				},
				created: function() {
					
				},
				mounted: function() {
					// 创建定时器更新最新的时间
					var _this = this;
					this.timer = setInterval(function() {
						_this.time = new Date()
					}, 1000);
				},
				beforeDestory: function() {
					// 实例销毁前清除定时器
					if (this.timer) {
						clearInterval(timer)
					}
				}

			})
		</script>
	</body>
</html>
